<template>
  <section class="component enclosure-list">
    <data-box :data="fileDataSet" class="annex-info-data-box">
      <template slot="columns">
        <el-table-column prop="originalName" label="文件名称" :min-width="$helper.getColumnWidth(8)"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text">
              <el-image 
                style="width:50px;height:50px;margin-top:10px"
                :src="scope.row.url" 
                placeholder="预览"
                :preview-src-list="srcList">
              </el-image>
            </el-button>
            <el-button type="text" @click="$common.downloadFile(scope.row.url,scope.row.originalName)" class="btn">下载</el-button>
          </template>
        </el-table-column>
      </template>
    </data-box>
  </section>
</template>


<script lang="ts">
import Vue from "vue";
import { Prop, Emit, Watch } from "vue-property-decorator";
import Component from "vue-class-component";

import { CaseOperatorPageService } from "~/services/domain-service/case-operator-page.service"
import { Dependencies } from '~/core/decorator';
import { FileUploadService } from "~/services/file-service/file-upload.service"

@Component({
  components: {}
})
export default class EnclosureList extends Vue {
  @Dependencies(CaseOperatorPageService) private caseOperatorPageService: CaseOperatorPageService;
  @Dependencies(FileUploadService) private fileUploadService: FileUploadService;
  // 附件列表
  @Prop({
    required: true,
    type: String
  })
  private fileIds: string;
  private fileDataSet: any = []
  private srcList: string[] = []
  @Emit("close")
  private emitClose() { }

  @Watch("fileIds", { immediate: true })
  private onfileIdsChange(val) {
    this.fileDataSet = []
    if (val) this.fileUploadService.getAllUploadFileByIds([val]).subscribe(data => {
      this.fileDataSet = data
      this.fileDataSet.forEach(item =>{
          this.srcList.push(item.url)
      })
    })
  }
}
</script>
